<template>
    <div class="content">
        <div id="main" class="chart-item"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
import mapJson from '@/mock/data/210100_full.json'
export default {
  name: 'index',
  data () {
    return {
      mapJsonData: mapJson,
      list: []
    }
  },
  methods: {
    init () {
      let myChart = echarts.init(document.getElementById('main'))
      let categories = []
      for (let i = 0; i < 2; i++) {
        categories[i] = {
          name: '类目' + i
        }
      }
      let option = {
        // 提示框的配置
        tooltip: {
          formatter: function (x) {
            return x.data.des
          }
        },
        legend: [{
          // selectedMode: 'single',
          data: categories.map(function (a) {
            return a.name
          }),
          top: 10
        }],
        series: [{
          type: 'graph', // 类型:关系图
          layout: 'force', // 图的布局，类型为力导图
          symbolSize: 40, // 调整节点的大小
          roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [2, 10],
          force: {
            repulsion: 2500,
            edgeLength: [10, 50]
          },
          draggable: true,
          lineStyle: {
            normal: {
              width: 2,
              color: '#4b565b'
            }
          },
          edgeLabel: {
            normal: {
              show: true,
              formatter: function (x) {
                return x.data.name
              }
            }
          },
          label: {
            normal: {
              show: true,
              textStyle: {}
            }
          },

          // 数据
          data: [{
            name: 'node01',
            des: 'nodedes01',
            symbolSize: 70,
            category: 0
          }, {
            name: 'node02',
            des: 'nodedes02',
            symbolSize: 50,
            category: 1
          }, {
            name: 'node03',
            des: 'nodedes3',
            symbolSize: 50,
            category: 1
          }, {
            name: 'node04',
            des: 'nodedes04',
            symbolSize: 50,
            category: 1
          }, {
            name: 'node05',
            des: 'nodedes05',
            symbolSize: 50,
            category: 1
          }],
          links: [{
            source: 'node01',
            target: 'node02',
            name: 'link01',
            des: 'link01des'
          }, {
            source: 'node01',
            target: 'node03',
            name: 'link02',
            des: 'link02des'
          }, {
            source: 'node01',
            target: 'node04',
            name: 'link03',
            des: 'link03des'
          }, {
            source: 'node01',
            target: 'node05',
            name: 'link04',
            des: 'link05des'
          }],
          categories: categories
        }]
      }
      myChart.setOption(option)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
        height: auto;
    }
    .chart-item-1{
        width: 100%;
        height: 240px;
    }
    .chart-item{
        width: 100%;
        height: 600px;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item .left{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .title-item .right{
        float: right;
        color: gray;
        font-size: 12px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .table-div{
        padding: 0 10px;
    }
    .van-col {
        padding: 10px 0;
    }
    .content >>> .van-progress__pivot{
        background-color: initial !important;
        color: #ffffff;
    }
    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag{
        margin-right: 1px;
    }
    .content-item{
        padding: 0 10px;
    }
    .content-item .van-row{
        border: 1px solid #dddddd;
        border-radius: 5px;
        padding: 0 10px 10px 10px;
        font-size: 12px;
        background-color: #ffffff;
    }
    .content-item .time-item{
        font-size: 10px;
        text-align: right;
        padding: 10px 0 0 0;
    }
    .content-item>.van-row>.van-col.van-col--4>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--6>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--8>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--4{
        padding: 0 2px;
        width: 20%;
    }
    .content-item>.van-row>.van-col.van-col--6{
        padding: 0 2px;
    }
    .content-item>.van-row>.van-col.van-col--8{
        padding: 0 2px;
    }
    .num{
        font-size: 14px;
    }
    .title-name{
        background: #dddddd;
    }
    .add-item{
        font-size: 10px;
    }
    .color-oranged{
        color: orangered;
    }
    .color-orange{
        color: orange;
    }
    .color-green{
        color: rgb(40, 183, 163);
    }
    .color-gray{
        color: gray;
    }
    .color-blue{
        color: rgb(51, 102, 255);
    }
    .table-item .van-col.van-col--4{
        width: 20%;
        font-size: 12px;
    }
    .van-icon.van-icon-chart-trending-o{
        font-size: 14px;
    }
    .diagnosis{
        padding: 0 10px;
    }
    .diagnosis .diagnosis-item{
        padding: 0 2px;
    }
    .diagnosis .van-col.van-col--12 .diagnosis-boder{
        border: 1px solid #8b0000;
        border-top: 5px solid #8b0000;
        padding: 10px;
        font-size: 12px;
        margin-bottom: 5px;
        background-color: #ffffff;
    }
    .diagnosis .van-col.van-col--12 .diagnosis-boder span{
        font-weight: bold;
    }
    .pd{
        padding: 0 0 5px 0;
    }
    .van-row .pd:last-child{
        padding: 0;
    }
    .echart{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin: 10px 0;
    }
</style>
